<template>
  <div>
    <div class="header">
      <div class="header_title">仿网易严选商品管理系统</div>
      <div class="icon">
        <i class="el-icon-menu" @click="changeWidth"></i>
      </div>
    </div>

    <div :class="isCollapse ==true ?'down active':'down'">
      <div class="sidebar">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          :collapse="isCollapse"
          router
        >
          <el-submenu v-for="(menu,index) in newMenu" :index="index+''" :key="index">
            <template slot="title">
              <i :class="menu.icon"></i>
              <span>{{menu.name}}</span>
            </template>
            <el-menu-item
              v-for="(subs,index1) in menu.subs"
              :key="index1"
              :index="subs.path"
            >{{subs.name}}{{subs.path}}</el-menu-item>
          </el-submenu>
        </el-menu>
      </div>
      <!-- 这个router-view是用来切换home页面里面的children页面的 -->
      <!-- 而用来切换与home页面同级的页面的router-view放在App.vue -->
      <div :class="isCollapse ==true ?'content content_active':'content'">
        <router-view class="table" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapse: true,
      newMenu: [],
      menu: [
        {
          icon: "el-icon-location",
          name: "商品管理",
          subs: [
            { name: "商品列表", path: "/good" },
            { name: "商品分类", path: "/category" },
            { name: "品牌管理", path: "/brand" },
            { name: "商品属性管理", path: "/attribute" }
          ]
        },
        {
          icon: "el-icon-s-management",
          name: "订单中心",
          subs: [
            { name: "订单列表", path: "/order" },
          ]
        },
        {
          icon: "el-icon-service",
          name: "店铺运营",
          subs: [
            { name: "专题管理", path: "/topic" },
          ]
        },
      ]
    }
  },
  methods: {
    changeWidth() {
      this.isCollapse = !this.isCollapse
    }
  },
  created() {
    const userinfo = this.$store.state.userinfo

    // 使用for循环或者是reduce将用户权限
    // [{path:'xxx',name:'xxx'}] => {path:true} 的形式，方便用来判断是否不同权限的导航的存在
    // {/category: true, /good: true, /order: true}

    // let newUserinfo = []
    // for (var i = 0; i < userinfo.length; i++) {
    //   newUserinfo[userinfo[i].path] = true
    // }


    let newUserinfo = userinfo.reduce((prev, current) => {
      prev[current.path] = true
      return prev
    }, {})
    // console.log(newUserinfo)

    // 定义一个超级管理员的新数组
    let newMenu = []

    // data中的menu是写死的，是已经确定好了的
    // 遍历一级标题
    for (var i = 0; i < this.menu.length; i++) {
      let subs = []   //这个数组是存放二级标题的
      // 遍历二级导航，将通过和data中的menu判断不同权限的二级导航是否存在
      for (var j = 0; j < this.menu[i].subs.length; j++) {
        if (newUserinfo[this.menu[i].subs[j].path]) {    //如果对应的二级导航存在，那就放到二级数组里面
          subs.push(this.menu[i].subs[j])
        }
      }
      if (subs.length > 0) {
        newMenu.push({
          icon: this.menu[i].icon,
          name: this.menu[i].name,
          subs: subs
        })
      }
    }

    // 将遍历出来新菜单放到data里渲染
    this.newMenu = newMenu

  },

}


// 普通用户与超级管理员两者之间界面不同的思想
// 当用户输入普通用户的账号密码时，会返回一个功能较少的数据
// 当超级管理员输入账号密码时，同样的接口返回全部的数据
// 接口返回回来的数据保存在vuex里面
// 存到vuex之后再拿出来和home里面的data对比，过滤
// 通过返回来的放在vuex里数据分出普通用户和超级管理员

</script>
 
<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.header {
  padding: 0;
  height: 100%;
  margin: 0;
  width: 100%;
  height: 70px;
  background: #409eff;
  color: #fff;
  .header_title {
    line-height: 70px;
    font-size: 22px;
    float: left;
    padding: 0 15px;
  }
  .icon {
    font-size: 20px;
    float: left;
    line-height: 70px;
  }
}
.sidebar {
  height: 100%;
  display: block;
  position: absolute;
  .el-menu {
    width: 250px;
  }
}
.active {
  .el-menu {
    width: 60px;
    transition: all ease-in-out 0.5s;
  }
}

.sidebar > ul {
  height: 100%;
}
.content {
  height: 100%;
  display: flex;
  flex-direction: column;
  position: absolute;
  box-sizing: border-box;
  top: 70px;
  left: 251px;
  bottom: 0;
  right: 0;
  transition: left 0.3s ease-in-out;
  background-color: #f0f0f0;
  padding: 15px 15px 8px;
  overflow-y: auto;
  box-sizing: border-box;
  .table {
    padding: 10px;
    width: 100%;
    background: #fff;
  }
}
.content_active {
  left: 60px;
  transition: all ease-in-out 0.5s;
}
</style>

